<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义组件</title>
</head>
<body>
    <div id="app">
        <my-header></my-header>

    </div>
    <script src="../day02/lib/vue.global.js"> </script>
    <script>

        //定义一个组件的选项对象
        const options = {
            //组件的视图模板
            template:`
            <div>这是一个自定义模板 {{ message }} </div>
            <div>{{ message.split("").reverse().join("")}}</div>
            <button @click="handleChange">修改message</button>
            `,
            data(){
                return {
                    message:"hello"
                }
            },
            methods:{
                handleChange(){
                    this.message="你好！！！"
                }
            },

        
        }
        const app =Vue.createApp({

        })
            // 全局注册：可以调用app.component(name,options) 来全局注册组件
            // 参数1：组件的名字
            // 参数2：组件的选项对象
            // 定义名字：要渲染注册的组件，使用组件名称小写短横线命名规范作为标签名使用
            //注意：取的名字不能和标签名字一样，取名字的时候后建议至少两个单词
            app.component("MyHeader",options)


        app.mount("#app")
    </script>
</body>
</html>